<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form style="float: left">
            <el-button size="mini" type="primary" @click="getData"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="showAddDialog"
              >新 增</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <!-- 菜品名称	时间段	所属食堂	图片路径	ID -->
      <el-table-column
        prop="菜品名称"
        label="菜品名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="时间段"
        label="时间段"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="所属食堂"
        label="所属食堂"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showUpdateDialog(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            style="color: #ff0000; margin-left: 35px"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      :title="formDialog.title"
      :visible.sync="formDialog.show"
      width="40%"
    >
      <el-form
        ref="formDialog"
        :model="formDialog"
        label-width="100px"
        class="flex"
      >
        <!-- 姓名,联系电话,密码,机构编号,机构名称,楼宇名称,类型 -->
        <el-form-item label="菜品名称：">
          <el-input
            style="width: 200px"
            v-model="formDialog.RealName"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="联系电话：">
          <el-input
            style="width: 200px"
            v-model="formDialog.MobilePhone"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="密码：">
          <el-input
            style="width: 200px"
            v-model="formDialog.UserPassword"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="机构：">
          <el-select
            v-model="formDialog.OrgID"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in OrganizationList"
              :key="item.OrgID"
              :label="item.机构名称"
              :value="item.OrgID"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="时间段：">
          <el-select
            v-model="formDialog.UserType"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in dishTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
            action=""
            :limit="1"
            :on-change="handleChange"
            :auto-upload="false"
            :file-list="fileList"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import OSS from 'ali-oss';
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      formDialog: {},
      OrganizationList: [],
      tableData: [],
      originalData: [],
      dishTypeList: [{ "label": "早餐", "value": "0" }, { "label": "午餐", "value": "1" }, { "label": "晚餐", "value": "2" }],

      fileLists: [],

      //图片上传
      dataObj: {
        region: 'oss-cn-beijing',//我的存储是北京，可根据具体配置自行修改
        accessKeyId: 'LTAISI12uxTRFccz',
        accessKeySecret: 'cQAvLIZ9JizT5RXRNPBVcXfg3iURD8',
        bucket: 'photo-srw-hb2',
      }, //存签名信息
      baseAli: 'oss-cn-beijing.aliyuncs.com',
    }
  },
  mounted () {
    // this.getBuildingList()
    this.getData()
  },
  methods: {
    // 获取 菜品
    async getData () {
      var url = 'System/GetDishInfo?Name=&Type=-1&UserID=' + localStorage.getItem('UserID')
      // var url = 'System/GetUserInfo?UserID=' + localStorage.getItem('UserID')
      const { data } = await this.$Http.get(url)
      this.originalData = data
      console.log(data)
      // this.originalData = [{"VID":535,"WORKDATE":"2021-06-16","AM_IN":"06:28:50","AM_OUT":"11:00:49","PM_IN":"13:20:57","PM_OUT":"22:03:01","APOINT":40,"WORKCOUNT":"7.5","CPOINT":30,"WORKTIME":"224","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"刘广梅","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":541,"WORKDATE":"2021-06-16","AM_IN":"04:56:33","AM_OUT":"11:01:22","PM_IN":"13:25:36","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"19.1","CPOINT":30,"WORKTIME":"370","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"孟广珍","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":552,"WORKDATE":"2021-06-16","AM_IN":"04:46:50","AM_OUT":"11:04:35","PM_IN":"13:24:25","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"24.2","CPOINT":30,"WORKTIME":"456","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"郭天利 ","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null}]
      this.personQuery()
    },
    // 模糊查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // const { name, client } = this.person
      // if (name) this.tableData = this.tableData.filter(item => item.CLIENT_NAME.includes(name))
      // if (this.teamValue != '全部') this.tableData = this.tableData.filter(item => this.teamValue == item.TITLE)
    },
    // 组织机构 新增
    handleSubmit () {
      if (this.formDialog.title.includes('新增')) {
        this.addData();
      } else {
        this.updateData();
      }
    },
    updateData () {
      var arrOrganization = this.OrganizationList.filter(item => this.formDialog.OrgID === item.OrgID)
      this.formDialog.OrgName = arrOrganization[0].机构名称
      // this.formDialog.UserID = localStorage.getItem('DepartmentName')
      console.log(this.formDialog)
      this.$axios({
        url: 'System/UpdateUserInfo',
        method: 'post',
        data: this.formDialog
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功')
          this.formDialog.show = false;
          this.getData()
        } else {
          this.$message.error('新增失败' + '，' + res.data.Message);
        }
      })
    },
    addData () {
      var arrOrganization = this.OrganizationList.filter(item => this.formDialog.OrgID === item.OrgID)
      this.formDialog.OrgName = arrOrganization[0].机构名称
      this.formDialog.DepartmentName = localStorage.getItem('DepartmentName')
      // console.log(this.formDialog)
      this.$axios({
        url: 'System/AddUserInfo',
        method: 'post',
        data: this.formDialog
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功')
          this.formDialog.show = false;
          this.getData()
        } else {
          this.$message.error('新增失败' + '，' + res.data.Message);
        }
      })
    },
    // 打开新增窗口
    showAddDialog () {
      //清空编辑框
      this.formDialog = {
        title: '新增菜品',
        show: true,
        // RealName,MobilePhone,UserPassword,OrgID,OrgName,DepartmentName,UserType
        RealName: '',
        MobilePhone: '',
        UserPassword: '',
        OrgID: '',
        OrgName: '',
        DepartmentName: '',
        UserType: '',
      }
    },
    // 打开新增窗口
    showUpdateDialog (index, row) {
      var userData = Object.assign({}, row);
      var arrOrganization = this.OrganizationList.filter(item => userData.所属机构 === item.机构名称)
      var uType = '0'
      if (userData.人员类型 === '物业人员') {
        uType = '1'
      }
      this.formDialog = {
        title: '编辑菜品',
        show: true,
        RealName: userData.姓名,
        MobilePhone: userData.联系方式,
        UserPassword: userData.密码,
        OrgID: arrOrganization[0].OrgID,
        OrgName: userData.所属机构,
        UserType: uType,
        UserID: userData.UserID,
      }
    },
    // 删除
    async handleDelete (index, row) {
      var url = 'System/DeleteUserInfo?UserID=' + row.UserID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('删除成功')
        this.getData()
      } else {
        this.$message.error('删除失败');
      }
    },
    openFolder () {
      this.$refs.PicFile.click();
    },
    uploadPic () {
      this.readPic(this.$refs.PicFile.files[0]);
      this.$refs.PicFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
    },
    handleChange (file, fileLists) {
      console.log(file);
      console.log(fileLists);
      // 本地服务器路径
      console.log(URL.createObjectURL(file.raw));
      // 本地电脑路径
      console.log(document.getElementsByClassName("el-upload__input")[0].value);
      this.readPic(file)
    },
    // 读取图片
    readPic (file) {
      return new Promise((resolve, reject) => {
        // 此时可以自行将文件上传至服务器
        const that = this
        let client = new OSS(this.dataObj)
        const fileName = file.name
        //定义唯一的文件名，打印出来的uid其实就是时间戳
        //client 是第一步中的 client
        client
          .multipartUpload(fileName, file)
          .then((result) => {
            //下面是如果对返回结果再进行处理，根据项目需要
            // console.log(result)
            var url =
              'https://' +
              result.bucket +
              '.' +
              that.baseAli +
              '/' +
              result.name
            console.log(url)
            that.completeUploadPic(result.name, url)
            resolve()
          })
          .catch((err) => {
            console.log('err:', err)
            reject()
          })
      })
    },
    completeUploadPic (name, url) {
      this.formPhoto.imageList.push({ name: name, url: url })
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
    },
    handleSizeChange (size) {
      this.pageSize = size;
      // console.log(this.pageSize)
    }
  }
}
</script>
<style>
</style>